<template>
  <el-row>
    <el-form :inline="true" :model="queryDeptForm" class="demo-form-inline">
      <el-form-item label="菜单名称">
        <el-input v-model="queryDeptForm.deptName" placeholder="请填写菜单名称"></el-input>
      </el-form-item>
      <el-form-item label="部门状态">
        <el-select v-model="queryDeptForm.status" placeholder="请选择菜单状态">
          <el-option label="正常" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button v-permission="'sys:dept:list'" type="primary" @click="onQuery">查询</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <el-row>
    <el-button v-permission="'sys:dept:add'" type="primary" :icon="Plus" @click="handleAddDept">新增</el-button>
  </el-row>
  <el-row>
    <el-table
        :data="deptTableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all>
      <el-table-column prop="id" label="索引" width="220"/>
      <el-table-column prop="deptName" label="部门名称" width="180"/>
      <el-table-column prop="status" label="状态 " width="180">
        <template #default="scope">
          <span v-if="scope.row.status === 1">正常</span>
          <span v-else>禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"/>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button v-permission="'sys:dept:edit'" size="small" @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button v-permission="'sys:dept:delete'" size="small" type="danger" @click="handleDelete(scope.$index,
          scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-row>

  <el-dialog v-model="dialogVisible">
    <mine-dept-add :all-dept="deptTableData" :dept-form-data="deptFormData"></mine-dept-add>
  </el-dialog>
</template>

<script>
import {onMounted, ref, getCurrentInstance} from 'vue'
import * as deptApi from '@/api/dept/index'

import MineDeptAdd from "@/views/dept/components/mine-dept-add";

const {ElMessage, ElMessageBox} = require("element-plus");
const {Plus} = require("@element-plus/icons-vue/dist/index.mjs");
export default {
  name: "index",
  components: {MineDeptAdd},
  setup() {
    const {proxy} = getCurrentInstance()
    const queryDeptForm = ref({})
    const deptTableData = ref([])
    const dialogVisible = ref(false)
    const deptFormData = ref({})

    const onQuery = () => {
      handleInitDeptTableData(queryDeptForm.value)
    }
    const handleAddDept = () => {
      deptFormData.value = {
        parentId: "",
        sort: 1,
        status: 1
      }
      dialogVisible.value = true
    }

    const handleEdit = (index, row) => {
      deptFormData.value = row
      dialogVisible.value = true
    }
    const handleDelete = (index, row) => {
      ElMessageBox.confirm(
          '确定要删除当前数据吗？',
          '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
        deptApi.removeById(row.id).then(res => {
          if (res.success) {
            ElMessage({
              message: res.msg,
              type: 'success',
            })
            handleInitDeptTableData()
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      }).catch(() => {

      })
    }
    const handleInitDeptTableData = (params) => {
      deptApi.deptList(params).then(res => {
        if (res.success) {
          deptTableData.value = res.data
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    }
    proxy.$bus.on('submitDeptSuccess', data => {
      dialogVisible.value = false
      handleInitDeptTableData()
    })

    onMounted(() => {
      handleInitDeptTableData()
    })

    return {
      queryDeptForm,
      deptTableData,
      dialogVisible,
      deptFormData,
      Plus,
      onQuery,
      handleAddDept,
      handleEdit,
      handleDelete
    }
  }
}
</script>

<style scoped>

</style>
